<!DOCTYPE html>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP Page</title>
		<link href="remindIndex.css">
	</head>

	<style>
		body {
			font-size: 13px;
			line-height: 22px;
			text-algin: center;
			/* 页面内容居中 */
		}

		* {
			margin: 0px;
			padding: 0px;
			/*  去掉所有标签的marign和padding的值  */
		}

		ul {
			list-style: none;
			/*  去掉ul标签默认的点样式  */
		}

		a img {
			border: none;
			/*  超链接下，图片的边框  */
		}

		a {
			color: #333;
			text-decoration: none;
			/* 超链接样式 */
		}

		a:hover {
			color: #ff0000;
		}

		#mooc {
			width: 399px;
			border: 5px solid #ababab;
			-moz-border-radius: 15px;
			/* Gecko browsers */
			-webkit-border-radius: 15px;
			/* Webkit browsers */
			border-radius: 15px;
			box-shadow: 2px 2px 10px #ababab;
			margin: 50px auto 0;
			text-align: left;
			/* 让新闻内容靠左 */
		}
		/*  头部样式 */

		#moocTitle {
			height: 62px;
			overflow: hidden;
			/* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
			font-size: 26px;
			line-height: 62px;
			padding-left: 30px;
			background-image: -moz-linear-gradient(top, #393D49, #393D49);
			/* Firefox */
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #393D49), color-stop(1, #393D49));
			/* Saf4+, Chrome */
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');
			/* IE*/
			border: 1px solid #393D49;
			-moz-border-radius: 8px 8px 0 0;
			/* Gecko browsers */
			-webkit-border-radius: 8px 8px 0 0;
			/* Webkit browsers */
			border-radius: 8px 8px 0 0;
			color: #fff;
			position: relative;
		}

		#moocTitle a {
			position: absolute;
			right: 10px;
			bottom: 10px;
			display: inline;
			color: #fff;
			font-size: 12px;
			line-height: 24px;
		}
		/*  底部样式 */

		#moocBot {
			width: 399px;
			height: 10px;
			overflow: hidden;
			/* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
		}
		/*  中间样式 */

		#moocBox {
			height: 144px;
			width: 335px;
			margin-left: 25px;
			margin-top: 10px;
			overflow: hidden;
			/*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
		}

		#mooc ul li {
			height: 24px;
		}

		#mooc ul li a {
			width: 180px;
			float: left;
			display: block;
			overflow: hidden;
			text-indent: 15px;
			height: 24px;
		}

		#mooc ul li span {
			float: right;
			color: #999;
		}
	</style>
	<body>

		<div id="mooc">
			<!--  头部 -->
			<h3 id="moocTitle">到期提醒</h3>
			<!--  头部结束 -->
			<!--  中间 -->
			<div id="moocBox">
				<ul id="con1">
					<li><a href="#"></a><span></span></li>
					<li><a href="#"></a><span></span></li>
					<li><a href="#"></a><span></span></li>
					<li><a href="#"></a><span></span></li>
					<li><a href="#"></a><span></span></li>
					<li><a href="#"></a><span></span></li>

				</ul>
				<ul id="con2">
				</ul>
			</div>
			<!--  中间结束 -->
		</div>
	</body>
	<script src="/static/script/jquery-3.5.1.js"></script>
	<script>
		window.onload=function () {
            $.ajax({
                url:"/remind/allList",
                success:function (res) {
                    console.log(res)
					for(var i=0;i<res.data.length;i++){
						var li=$("<li></li>");
                        var status="";
                        if(res.data[i].status==1){
                            status="即将到期";
						}else if(res.data[i].status==0) {
                            status="已到期";
						}
						li.append(res.data[i].remindplate+"<span>"+"到期时间"+res.data[i].remindtime+"</span>"+res.data[i].rtype.rtype+"\t"+status)
						$("#con1").append(li)
					}
                }
            })
        }
	</script>
<script src="remindIndex.js"></script>
</html>